/* eslint-disable import/named */
<!-- 264 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button
        type="primary"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="ViewShippedUnshippedLotInfo"
      :model="queryForm"
    >
          <a-form-item
            :label="$t('T9_shopId')"
            name="shopId"
            prop="shopId"
            :rules="{
              required: true,
              message: $t('T9_shopId'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.shopId"
              class="t9-form-wideget-input-default"
              @change="changeShopId"
               :placeholder="$t('common_pleaseSelect')"
              allow-clear
            >
              <a-select-option
                v-for="item in shopIdArr"
                :key="item.shopId"
                :value="item.shopId"
              >
                {{ item.shopId }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            :label="$t('T9_productType')"
            name="productType"
            prop="productType"
          >
            <a-select
              v-model:value="queryForm.productType"
              class="t9-form-wideget-input-default"
              @change="changeProductType"
               :placeholder="$t('common_pleaseSelect')"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in productTypeArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_productId')" name="productId">
            <a-select
              v-model:value="queryForm.productId"
              class="t9-form-wideget-input-default"
              show-search
               :placeholder="$t('common_pleaseSelect')"
              allow-clear
            >
              <a-select-option
                v-for="item in productIdArr"
                :key="item.productId"
                :value="item.productId"
              >
                {{ item.productId }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_ownerType')" name="ownerType">
            <a-select
              v-model:value="queryForm.ownerType"
              class="t9-form-wideget-input-default"
               :placeholder="$t('common_pleaseSelect')"
              @change="changeOwnerType"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in ownerTypeArr"
                :key="item.enumName"
                :value="item.enumName"
              >
                {{ item.enumName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_owner')" name="owner">
            <a-select
              v-model:value="queryForm.owner"
              class="t9-form-wideget-input-default"
               :placeholder="$t('common_pleaseSelect')"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in ownerArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_shipUnship')" name="shipUnship">
            <a-select
              v-model:value="queryForm.shipUnShip"
              class="t9-form-wideget-input-default"
               :placeholder="$t('common_pleaseSelect')"
              show-search
              allow-clear
            >
              <a-select-option
                v-for="item in shipArr"
                :key="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_date')" name="date">
            <a-range-picker
              :show-time="{ format: 'HH:mm:ss' }"
              :default-value="queryForm.Date"
              format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%"
              @ok="onChange"
            />
          </a-form-item>
    </t-query-form>
    <a-descriptions
      bordered
      :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
    >
      <a-descriptions-item :label="$t('T9_sumGlassQty')">{{
        list.sumGlassQty
      }}</a-descriptions-item>
      <a-descriptions-item :label="$t('T9_sumCstQty')">{{
        list.sumCstQty
      }}</a-descriptions-item>
    </a-descriptions>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_cstList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button :loading="exportBtnLoading" @click="exportExl" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <t-table align="center" :data="list.tableData">
      <t-column min-width="100" field="eventTime" :title="$t('T9_eventTime')" />
      <t-column min-width="100" field="eventName" :title="$t('T9_eventName')" />
      <t-column min-width="100" field="cstId" :title="$t('T9_cstId')" />
      <t-column min-width="100" field="productType" :title="$t('T9_productType')" />
      <t-column min-width="100" field="productId" :title="$t('T9_productId')" />
      <t-column min-width="100" field="owner" :title="$t('T9_owner')" />
      <t-column min-width="100" field="state" :title="$t('T9_state')" />
      <t-column min-width="100" field="operation" :title="$t('T9_operation')" />
      <t-column min-width="100" field="glsQty" :title="$t('T9_glsQty')" />
      <t-column min-width="100" field="panelQty" :title="$t('T9_panelQty')" />
      <t-column min-width="100" field="location" :title="$t('T9_location')" />
      <t-column min-width="100" field="receiveFlag" :title="$t('T9_receiveFlag')" />
      <t-column min-width="100" field="dspFlag" :title="$t('T9_DspFlag')" />
      <t-column min-width="100" field="groupId" :title="$t('T9_groupId')" />
      <t-column min-width="100" field="shipGroupId" :title="$t('T9_shipGroupId')" />
      <t-column min-width="100" field="priority" :title="$t('T9_priority')" />
    </t-table>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import { downloadBlobFile } from '@/utils/download'
  import {
    getShopId,
    getProductType,
    getProductId,
    getOwnerType,
    getOwnerId,
    getList
  } from '@/api/common'
  import { getCurrentDate } from '@/utils/utils'

  export default defineComponent({
    name: 'ViewShippedUnshippedLotInfo',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        exportBtnLoading: false,
        list: {
          tableData: [],
          sumGlassQty: 0,
          sumCstQty: 0
        },
        shopIdArr: [],
        bayIdArr: [],
        eqpIdArr: [],
        productTypeArr: [],
        shipArr: [],
        productIdArr: [],
        ownerTypeArr: [],
        ownerArr: [],
        queryForm: {
          shopId: '',
          productType: undefined,
          productId: undefined,
          ownerType: undefined,
          owner: undefined,
          shipUnShip: undefined,
          Date: []
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.initShipDataSoure()
      this.getShopId()
      this.getProductType()
      this.getOwnerType()
      //   this.getList()
      this.queryForm.Date = [
        moment(getCurrentDate(), 'YYYY-MM-DD HH:mm:ss'),
        moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm:ss')
      ]
    },
    methods: {
      initShipDataSoure() {
        const shipDataSoure = [
          { value: 'Actual Ship' },
          { value: 'Ship' },
          { value: 'COA Ship' },
          { value: 'HVA Ship' },
          { value: 'Cross Ship' },
          { value: 'ACTOCELL Ship' },
          { value: 'POA Ship' },
          { value: 'UnShip' },
          { value: 'COA UnShip' },
          { value: 'HVA UnShip' },
          { value: 'Cross UnShip' },
          { value: 'ACTOCELL UnShip' },
          { value: 'POA UnShip' }
        ]
        this.shipArr = shipDataSoure
      },
      handleSearch() {
        this.$refs.queryForm.validate().then(() => {
          this.getList()
        })
      },
      onChange(value, dates) {
        this.queryForm.Date = value
        console.log('Selected Time: ', value)
        console.log('Formatted Selected Time: ', dates)
      },
      exportExl() {
        if (!this.list.tableData.length) return
         if (this.exportBtnLoading) return
        this.exportBtnLoading = true
        const parmas = {
          ...this.queryForm,
          dtoName: 'ViewShipUnShipedLotListDTO',
          startTime:
            this.queryForm.Date.length !== 0
              ? this.queryForm.Date[0].format('YYYYMMDDHH')
              : null,
          endTime:
            this.queryForm.Date.length !== 0
              ? this.queryForm.Date[1].format('YYYYMMDDHH')
              : null,
          queryId: 'GetLotHistoryList',
          version: '80009',
          menuName: 'viewShippUnShipedInfo',
          usage: 'queryViewShipUnShipedInfoList',
          export: true,
          site: 'T7'
        }
        getList(parmas).then(res => {
          downloadBlobFile(res, 'cstList')
          this.exportBtnLoading = false
        })
      },
      getList() {
        const obj = {
          ...this.queryForm,
          dtoName: 'ViewShipUnShipedLotListDTO',
          startTime:
            this.queryForm.Date.length !== 0
              ? this.queryForm.Date[0].format('YYYYMMDDHHmmss')
              : null,
          endTime:
            this.queryForm.Date.length !== 0
              ? this.queryForm.Date[1].format('YYYYMMDDHHmmss')
              : null,
          queryId: 'GetLotHistoryList',
          version: '80009',
          menuName: 'viewShippUnShipedInfo',
          usage: 'queryViewShipUnShipedInfoList',
          site: 'T7'
        }
        // return
        getList(obj).then((res) => {
          console.log(res, 'res')
          this.list.tableData = res.viewShipUnShipedLotListDTOList
          this.list.sumCstQty = res.sumCstQty
          this.list.sumGlassQty = res.sumGlassQty
        })
      },
      changeShopId(val) {
        if (val) {
          this.getProductId()
          this.getOwnerId()
        }
      },
      changeProductType(val) {
        if (val) {
          this.getProductId()
        }
      },
      changeOwnerType(val) {
        if (val) {
          this.getOwnerId()
        }
      },
      changeBayId(val) {
        if (val) {
          this.getEqpId()
        }
      },
      getShopId() {
        const params = {
        }
        getShopId(params).then((res) => {
          this.shopIdArr = res
        })
      },
      getProductType() {
        getProductType().then((res) => {
          this.productTypeArr = res
        })
      },
      getProductId() {
        const params = {
          productType: this.queryForm.productType,
          shopId: this.queryForm.shopId
        }
        const arr = Object.keys(params).filter((v) => !params[v])
        if (!arr.length) {
          getProductId(params).then((res) => {
            this.productIdArr = res
          })
        }
      },
      getOwnerType() {
        getOwnerType().then((res) => {
          this.ownerTypeArr = res
        })
      },

      getOwnerId() {
        const params = {
          ownerType: this.queryForm.ownerType,
          shopId: this.queryForm.shopId
        }
        const arr = Object.keys(params).filter((v) => !params[v])
        if (!arr.length) {
          getOwnerId(params).then((res) => {
            this.ownerArr = res
          })
        }
      }
    }
  })
</script>
<style lang="less" scoped>
.t9-form-wideget-input-default {
  width: 150px;
}
</style>
